<template>
  <LayoutSidbar :add-type="1">
    <!-- 左侧内容 -->
    <template #left>
      <LayoutScroll>
        <template #item>
          <li
            class="chatroom"
            v-for="chatroom in chatRoomList"
            :key="chatroom.id"
            :class="{ active: activeRommId === chatroom.id }"
            @click="changeChatRoom(chatroom.id)"
          >
            <div class="contact-avatar">
              <AvatarBase :width="40" :show-detail="true"></AvatarBase>
            </div>

            <div class="contact-info">
              <div class="contact">
                <div class="contact-name">{{ chatroom.room_name }}</div>
                <div class="contact-time">
                  {{ chatroom.last_contact_time }}
                </div>
              </div>
              <div class="contact-content">
                <span>
                  {{ chatroom.last_contact_content }}
                </span>
              </div>
            </div>
          </li>
        </template>
      </LayoutScroll>
    </template>
  </LayoutSidbar>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import LayoutSidbar from "../../components/layout/LayoutSidbar.vue";
import LayoutScroll from "@/components/layout/LayoutScroll.vue";

const router = useRouter();
// 激活的房间id
const activeRommId = ref(0);

const chatRoomList = ref<any>([]);

// 处理数据
for (let i = 0; i < 100; i++) {
  chatRoomList.value.push({
    id: i + 1,
    room_name: "小明",
    avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    last_contact_time: "12:00",
    last_contact_content: "你好，我是小明111111111111111111111111111111。",
  });
}

// 切换聊天内容
const changeChatRoom = (id: number) => {
  activeRommId.value = id;

  // 跳转路由
  router.push({ path: `/chat/${id}` });
};
</script>

<style scoped lang="scss">
.chatroom {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 12px;
  background-color: #ebe9e7;
  height: 64px;
  position: relative;

  &:hover {
    background-color: #d6d6d6;
  }

  &.active {
    background-color: #c6c5c5;
  }

  .contact-avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 40px;
    width: 100%;

    .contact {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      line-height: 14px;
      margin-bottom: 5px;

      .contact-name {
        font-size: 14px;
      }

      .contact-time {
        color: #a8a8a7;
        font-size: 12px;
        position: absolute;
        right: 12px;
        top: 12px;
      }
    }

    .contact-content {
      font-size: 12px;
      color: #9e9e9e;
      overflow: hidden;
      /* 隐藏超出部分 */
      text-overflow: ellipsis;
      /* 超出部分显示省略号 */
      white-space: nowrap;
      /* 禁止文本换行 */
      display: block;
      /* 使得 text-overflow 生效 */
      width: calc(100% - 74px);
    }
  }
}
</style>
